<template>
  <div class="search">
    <van-nav-bar title="搜索" left-arrow @click-left="$router.back()" />
    <van-row class="input">
      <van-col span="20">
        <van-field v-model="value" placeholder="请输入商家或美食名称" clearable @clear="clearInput" />
      </van-col>
      <van-col span="3" offset="1">
        <van-button type="info" size="mini" @click="serachShop">提交</van-button>
      </van-col>
    </van-row>
    <shop-list :shopList="shopList"></shop-list>
    <div class="error" v-show="showSearchCon">很抱歉，没有搜索结果</div>
    <!-- 搜索历史 -->
    <div v-show="search[0]">
      <div class="serach" v-show="serachFlag">
        <div class="serach_title">搜索历史</div>
        <div
          class="search_group"
          v-for="item of search"
          :key="item.time"
          @click="changeSearch(item.value)"
        >
          <div>{{item.value}}</div>
          <div class="group_clear" @click.stop="clearGroup(item.value)">X</div>
        </div>
        <div class="search_clear" @click="clearSearch">清空搜索历史</div>
      </div>
    </div>
  </div>
</template>

<script>
import shopList from "@/components/common/shoplist.vue";
import { mapState } from "vuex";
export default {
  name: "serach",
  data() {
    return {
      value: "", //搜索关键字
      shopList: [], //搜索结果列表
      serachFlag: true, //搜索记录
      showSearchCon: false,
      timeOut: null
    };
  },
  computed: {
    ...mapState(["search"])
  },
  components: { shopList },
  methods: {
    serachShop() {
      //搜索餐馆
      clearTimeout(this.timeOut); //节流，清除上一次定时器
      this.timeOut = setTimeout(async () => {
        if (this.value !== "") {
          const { data: res } = await this.$axios.get("v4/restaurants", {
            params: {
              geohash: this.$route.params.geohash,
              keyword: this.value.trim()
            }
          });
          if (res.length == 0 || res.status == 0) {
            this.showSearchCon = true; //没有任何结果显示
          }
          this.shopList = res;
          const value = { value: this.value, time: new Date() };
          this.$store.commit("saveSearch", value); //保存搜索记录
          this.serachFlag = false; //关闭搜索记录
        }
        this.$toast("请输入");
      }, 1000);
    },
    clearGroup(value) {
      //清空单个记录
      this.$store.commit("clearGroup", value);
    },
    clearSearch() {
      //清空所有记录
      this.$store.commit("clearSearch");
    },
    changeSearch(value) {
      //点击记录改变搜索
      this.value = value;
      this.serachShop();
    },
    clearInput() {
      //清空输入框
      this.shopList = [];
      this.serachFlag = true; //打开搜索记录
      this.showSearchCon = false; //没有搜索结果
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '../../assets/css/common.styl';

.van-nav-bar {
  background-color: $bg-color;
}

.van-nav-bar__text, .van-nav-bar__text, .van-nav-bar__title {
  color: #fff;
}

.van-nav-bar .van-icon {
  color: #fff;
  font-size: 0.6rem;
}

.van-nav-bar__title {
  font-weight: 700;
}

.input {
  padding: 0.2rem 0.5rem;
}

.van-cell {
  padding: 0.1rem;
  background-color: #eee;
  border: 1px solid #fff;
  border-radius: 3px;
}

.search {
  font-size: 16px;
  padding-bottom: 50px;

  .serach_title {
    padding: 10px;
  }

  .search_group {
    display: flex;
    padding: 10px;
    justify-content: space-between;
    background-color: #fff;
    border-bottom: 1px solid #999;

    .group_clear {
      color: #999;
      font-size: 14px;
    }
  }

  .search_clear {
    padding: 10px;
    text-align: center;
    color: #3190e8;
    font-weight: 700;
    background-color: #fff;
  }
}

.error {
  font-size: 16px;
  padding: 10px;
  text-align: center;
  background-color: #fff;
}
</style>